<template>
  <div v-loading.fullscreen="loadingFlag"
       :element-loading-text="loadingText"
       element-loading-background="rgba(0, 0, 0, 0.7)"/>
  <el-result
      v-if="showResultFlag"
      icon="success"
      title="测评结果分析完成"
      subTitle="是否查看详细报告"
      class="result-container"
  >
    <template #extra>
      <el-button type="primary" @click="goToPerIndexPage">返回</el-button>
      <el-button type="primary" @click="handleViewResult(paperId)">查看详细报告</el-button>
    </template>
  </el-result>
</template>

<script setup>
import {ref} from "vue";

const {proxy} = getCurrentInstance();
const paperId = ref();
const loadingFlag = ref(false);
const loadingText = ref('');
const showResultFlag = ref(true);

// 返回个人测评首页
function goToPerIndexPage() {
  proxy.$router.push({path: '/online-assessments'})
}

// 跳转到查看详细报告
function handleViewResult(paperId) {
  showResultFlag.value = false;
  loadingFlag.value = true;
  loadingText.value = '正在加载详细报告';
  setTimeout(() => {
    loadingFlag.value = false;
    loadingText.value = '加载完成';
    proxy.$router.push({
      path: '/result',
      query: {  // 使用 query 传参
        paperId: paperId,
        delFlag: '0',
      }
    })
  }, 1000);
}

onMounted(() => {
  paperId.value = proxy.$route.query.paperId;
})
</script>

<style scoped lang="scss">
.result-container {
  /* 基础布局 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;

  /* 尺寸调整 */
  width: 600px; // 比默认更大
  min-height: 400px; // 最小高度
  padding: 40px; // 更大的内边距

  /* 视觉增强 */
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

  /* 动画效果 */
  animation: result-scale 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);

  /* 标题样式 */
  :deep(.el-result__title) {
    font-size: 24px;
    margin-top: 20px;
    color: #303133;
  }

  /* 副标题样式 */
  :deep(.el-result__subtitle) {
    font-size: 16px;
    margin-top: 15px;
    line-height: 1.6;
    color: #606266;
  }

  /* 图标调整 */
  :deep(.el-result__icon) {
    svg {
      width: 80px !important;
      height: 80px !important;
    }
  }

  /* 按钮容器 */
  :deep(.el-result__extra) {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;

    .el-button {
      padding: 12px 30px;
      font-size: 16px;
    }
  }
}

@keyframes result-scale {
  from {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 响应式处理 */
@media (max-width: 768px) {
  .result-container {
    width: 90%;
    min-height: auto;
    padding: 20px;

    :deep(.el-result__title) {
      font-size: 20px;
    }

    :deep(.el-result__subtitle) {
      font-size: 14px;
    }
  }
}
</style>

